<template>
	<view class="container">
		<children-base-top-view 
			:name="children.childrenName" 
			:gender="children.gender" 
			:imgUrl="children.imgUrl"
			:month="children.month"
			/>
		<view v-if="children.checkStatus === '0' || children.checkStatus === '2'" class="base-info-view">
			<view class="item">
				<text class="title">身高(CM)</text>
				<view class="input-bg">
					<u-field label-width="0" :clearable="false" input-align="center" :border-bottom="false"
						v-model="form.height" :placeholder-style="placeholderStyle" placeholder="身高">
					</u-field>
				</view>
			</view>
			<view class="item">
				<text class="title">体重(KG)</text>
				<view class="input-bg">
					<u-field label-width="0" :clearable="false" input-align="center" :border-bottom="false"
						v-model="form.weight" :placeholder-style="placeholderStyle" placeholder="体重">
					</u-field>
				</view>
			</view>
			<view class="item">
				<text class="title">头围(CM)</text>
				<view class="input-bg">
					<u-field label-width="0" :clearable="false" input-align="center" :border-bottom="false"
						v-model="form.header" :placeholder-style="placeholderStyle" placeholder="头围">
					</u-field>
				</view>
			</view>
		</view>
		
		<view class="check-multiple" @click="multipleCheckClick">
			<view>{{showReport ? '详细晨检报告已完成':'详细晨检报告未完成'}}</view>
			<u-icon name="arrow-right" color="#A6A6A6" :size="18"></u-icon>
		</view>

		<u-form v-if="children.checkStatus === '0' || children.checkStatus === '2'"
			:label-style="labelStyle"
			:model="form" ref="uForm"
			label-width="150">
			<view class="radio-group-bg">
				<u-radio-group v-model="checkType">
					<u-radio v-for="(item, index) in checkTypeList" :key="index" :name="item.name" active-color="#DA473A">
						{{ item.label }}
					</u-radio>
				</u-radio-group>
			</view>
			
			<view v-if="checkType === 1" class="group-bg checkbox-bg">
				<view class="title-view">
					<view class="point"></view>
					<text class="title">选择异常项并作出诊断</text>
					<view class="point"></view>
				</view>
				
				<u-checkbox-group width="33.33%" class="checkbox-view" active-color="#DA473A" shape="circle">
					<u-checkbox v-model="item.checked" v-for="(item, index) in exceptionList" 
					:key="index" :name="item.name"  >
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
					
				<view class="input-area-bg">
					<u-input v-model="form.specialRecord" type="textarea" placeholder="请输入特殊记录" />
				</view>
				
				<view class="input-area-bg">
					<u-input v-model="form.sickName" type="textarea" placeholder="请输入疾病名称"/>
				</view>
			</view>
			
			<view v-if="checkType === 2" class="group-bg">
				<u-checkbox-group width="33.33%" class="checkbox-view" active-color="#DA473A" shape="circle">
					<u-checkbox v-model="item.checked" v-for="(item, index) in leaveList" 
					:key="index" :name="item.name"  >
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</view>
			
			<view v-if="checkType === 2 || checkType === 3" class="group-bg">
				<view class="input-area-bg">
					<u-input v-model="form.name" type="textarea" placeholder="请输入请假理由"/>
				</view>
			</view>
			
			<view v-if="checkType === 4" class="group-bg">
				<u-form-item label="销课原因">
					<u-input v-model="form.name" placeholder="请输入销课原因"/>
				</u-form-item>
				<u-form-item label="销课天数">
					<u-input v-model="form.day" placeholder="请输入销课天数" type="number"/>
				</u-form-item>
				<u-form-item label="销课类型">
					<u-radio-group v-model="form.isHoliday">
						<u-radio name="1">
							工作日
						</u-radio>
						<u-radio name="0">
							节假日
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>

			<view class="group-bg">
				<u-upload ref="uUpload" width="200" height="200" max-count="1" :file-list="fileList"
					:auto-upload="false"></u-upload>
			</view>
		</u-form>
		
		<view v-else class="group-bg">
			<u-upload ref="uUpload" width="200" height="200" max-count="1" :file-list="fileList"
				:auto-upload="false"></u-upload>
		</view>
		
		<view v-if="children.checkStatus === '0' || children.checkStatus === '2'" class="action-view">
			<u-row v-if="checkType === 0 || checkType === 1">
				<u-col span="6">
					<x-button title="拒绝入园" :plain="true" @click="checkInClick(0)"></x-button>
				</u-col>
				<u-col span="6">
					<x-button title="批准入园" @click="checkInClick(1)"></x-button>
				</u-col>
			</u-row>
			<view v-if="checkType === 2 || checkType === 3 || checkType === 4" class="action-view">
				<x-button title="确认" @click="leaveClick"></x-button>
			</view>
		</view>
		<view v-else class="action-view">
			<x-button title="确认离园" @click="checkOutClick"></x-button>
		</view>
	</view>
</template>

<script>
	//宝宝健康状态 0 健康 1 不健康
	const CHILDREN_HEALTH = 0;
	const CHILDREN_UNHEALTH = 1;
	import {
		childrenCheckIn,
		childrenCheckInByFile,
		childrenCheckOut,
		childrenCheckOutByFile,
		getCheckReportInfo,
		childrenCheckInV2,
		childrenCheckInV2ByFile
	} from '@/api/check.js'
	import ChildrenBaseTopView from '@/components/children-base-top-view.vue'
	import XButton from '@/components/x-button.vue'
	import dictMixin from '@/mixins/dict.js'
	export default {
		mixins: [dictMixin],
		components: {
			ChildrenBaseTopView,
			XButton
		},
		data() {
			return {
				showReport: false,
				
				placeholderStyle: 'font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #999999;',
				children: {},
				form: {
					height: '',
					weight: '',
					header: '',
					specialRecord: '',
					sickName: '',
					name: '',
					day: '',
					isHoliday: '1'
				},
				checkType: 0,
				checkTypeList: [{
						name: 0,
						label: '健康',
						checked: true,
						disabled: false
					},
					{
						name: 1,
						label: '不健康',
						checked: false,
						disabled: false
					},
					{
						name: 2,
						label: '病假',
						checked: false,
						disabled: false
					},
					{
						name: 3,
						label: '事假',
						checked: false,
						disabled: false
					}
				],
				exceptionList: [{
						name: '精神',
						checked: false,
					},
					{
						name: '体温',
						checked: false,
					},
					{
						name: '皮肤',
						checked: false,
					},
					{
						name: '眼',
						checked: false,
					},
					{
						name: '耳',
						checked: false,
					},
					{
						name: '口',
						checked: false,
					},
					{
						name: '鼻',
						checked: false,
					},
					{
						name: '淋巴结',
						checked: false,
					},
					{
						name: '四肢',
						checked: false,
					},
				],
				leaveList: [{
						name: '发烧',
						checked: false,
					},
					{
						name: '感冒',
						checked: false,
					},
					{
						name: '咳嗽',
						checked: false,
					},
					{
						name: '肺炎',
						checked: false,
					},
					{
						name: '其他',
						checked: false,
					}
				],
				
				fileList: [],
				
				labelStyle: {
					'fontSize': '24rpx'
				}
			}
		},
		computed: {
			channel() {
				return getApp().globalData.channel;
			}
		},
		onLoad(options) {
			this.children = options;
			this.childrenCheck = this.dict.childrenCheck;
			console.log(this.childrenCheck);
			if (this.channel === 'xm') {
				this.checkTypeList.push({
					name: 4,
					label: '自定义',
					checked: false,
					disabled: false
				})
			}
		},
		onShow() {
			this.getChildrenCheckReport();
		},
		methods: {
			checkInClick(type) {
				console.log(type);
				if (type === 0) {
					//拒绝入园
					this.checkIn(this.childrenCheck.CHILDREN_CHECK_REJECT, CHILDREN_UNHEALTH, '', '', '')
				} else if (type === 1) {
					//同意入园
					if (this.checkType === 0) {
						//健康
						this.checkIn(this.childrenCheck.CHILDREN_CHECK_IN, CHILDREN_HEALTH, "", "", "")
					} else if (this.checkType == 1) {
						//不健康
						this.checkIn(this.childrenCheck.CHILDREN_CHECK_IN, CHILDREN_UNHEALTH, this.form.sickName,
							this.form.specialRecord, this.getExceptionString())
					}
				}
			},
			//离园
			checkOutClick() {
				this.checkOut();
			},
			//请假
			leaveClick() {
				if (this.checkType === 2) {
					this.checkIn(this.childrenCheck.CHILDREN_CHECK_SICK, CHILDREN_UNHEALTH, "", "", this.getLeaveString())
				} else if (this.checkType === 3) {
					this.checkIn(this.childrenCheck.CHILDREN_CHECK_SICK, CHILDREN_HEALTH, "", "", "")
				} else if (this.checkType === 4) {
					if (parseInt(this.form.day) > 0) {
						this.checkIn(this.childrenCheck.CHILDREN_CHECK_HOME, CHILDREN_HEALTH, "", "", "")
					} else {
						this.$u.toast('请填写销假天数')
					}
				}
			},

			checkIn(checkType, healthyTag, sickName, specialRecord, exceptionName) {
				uni.showLoading({})
				let data = {
					'childrenId': this.children.childrenId,
					'checkType': checkType,
					'sickName': sickName,
					'specialRecord': specialRecord,
					'exceptionName': exceptionName,
					'healthyTag': healthyTag,
					'height': this.form.height,
					'weight': this.form.weight,
					'header': this.form.header,
					'remark': this.form.name,
				}
				if (checkType === this.childrenCheck.CHILDREN_CHECK_HOME) {
					data.day = this.form.day;
					data.isHoliday = this.form.isHoliday
					// 'day': this.form.day,
					// 'isHoliday ': this.form.isHoliday
				}
				let files = this.$refs.uUpload.lists;
				let list = [];
				for (let index in files) {
					let item = files[index];
					list.push({
						'name': 'file',
						'file': item.file,
						'uri': item.url,
					});
				}
				console.log(list.length);
				
				if (list.length > 0) {
					let checkIn = childrenCheckInByFile;
					if (this.channel === 'xm') {
						checkIn = childrenCheckInV2ByFile;
					} 
					checkIn(data, list[0]).then(res => {
						console.log(res);
						uni.hideLoading();
						uni.navigateBack({})
					}).catch(error => {
						console.log(error);
						uni.hideLoading();
					})
				} else {
					let checkIn = childrenCheckIn;
					if (this.channel === 'xm') {
						checkIn = childrenCheckInV2;
					}
					checkIn(data).then(res => {
						console.log(res);
						uni.hideLoading();
						uni.navigateBack({})
					}).catch(error => {
						console.log(error);
						uni.hideLoading();
					})
				}
			},

			checkOut() {
				let data = {
					'childrenId': this.children.childrenId,
				}
				let files = this.$refs.uUpload.lists;
				let list = [];
				for (let index in files) {
					let item = files[index];
					list.push({
						'name': 'file',
						'file': item.file,
						'uri': item.url,
					});
				}
				uni.showLoading({});
				if (list.length > 0) {
					childrenCheckOutByFile(data, list[0]).then(res => {
						console.log(res);
						uni.hideLoading();
						uni.navigateBack({})
					}).catch(error => {
						console.log(error);
						uni.hideLoading();
					})
				} else {
					childrenCheckOut(data).then(res => {
						console.log(res);
						uni.hideLoading();
						uni.navigateBack({})
					}).catch(error => {
						console.log(error);
						uni.hideLoading();
					})
				}
			},

			getExceptionString() {
				let exception = '';
				for (let index in this.exceptionList) {
					let item = this.exceptionList[index];
					if (item.checked) {
						exception += `|${item.name}`;
					}
				}
				if (exception.length > 0) {
					exception = exception.substring(1);
				}
				return exception;
			},
			
			getLeaveString() {
				let exception = '';
				for (let index in this.leaveList) {
					let item = this.leaveList[index];
					if (item.checked) {
						exception += `|${item.name}`;
					}
				}
				if (exception.length > 0) {
					exception = exception.substring(1);
				}
				return exception;
			},
			
			multipleCheckClick() {
				console.log('multipleCheckClick');
				this.$u.route({
					url: '/pages_sub/check/check-multiple-page',
					params: {
						childId: this.children.childrenId
					}
				})
			},
			
			getChildrenCheckReport() {
				getCheckReportInfo(this.children.childrenId).then(res => {
					console.log(res);
					if (!this.$u.test.isEmpty(res.data)) {
						this.showReport = true;
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss" scoped>

	/deep/ .u-checkbox {
		display: flex;
		flex-direction: row;
		padding-left: 50rpx;
	}

	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 30rpx;
		padding-top: 30rpx;

		.base-info-view {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 30rpx;

			.item {
				width: 216rpx;
				height: 192rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.title {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.input-bg {
					width: 176rpx;
					height: 88rpx;
					background: #FAFAFA;
					border-radius: 20rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	
	.check-multiple{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #DA473A;
	}
	
	.radio-group-bg{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.group-bg{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;
	}
	
	.checkbox-bg{
		
		> .title-view{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
			width: 100%;
			
			> .point{
				width: 12rpx;
				height: 12rpx;
				background: #DA473A;
				border-radius: 6rpx;
			}
			
			> .title{
				font-size: 30rpx;
				font-family: FZZhengHeiS-EB-GB;
				font-weight: 400;
				font-style: italic;
				color: #D33737;
				line-height: 53rpx;
				margin-left: 22rpx;
				margin-right: 22rpx;
			}
		}
	}
	
	.input-area-bg{
		height: 200rpx;
		background: #FAFAFA;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.action-view {
		margin-top: 50rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
